<template>
	<!-- 使用 Vue 的 transition 组件包裹整个页面，实现淡入淡出动画 -->
	<transition name="fade">
		<view v-if="show" class="publish-overlay" @touchmove.stop.prevent>

			<!-- 内容容器 -->
			<view class="publish-content-wrapper">
				<!-- 顶部提示信息 -->
				<view class="top-info-bar">
					<text class="releaseIconfont icon-fabu-diandengpao info-icon"></text>
					<text class="info-text" @click="handleToTaskCenter">参与发布创作，领取更多权益好礼</text>
					<text class="releaseIconfont icon-fabu-xuzhi info-circle-icon"></text>
				</view>

				<!-- 顶部文字区域 -->
				<view class="header-text">
					<text class="title">发布，</text>
					<view class="subtitle-wrapper">
						<text class="subtitle">让你的旅途更有趣。</text>
						<text class="subtitle-background-icon releaseIconfont icon-fabu-xiantiao"></text>
					</view>
				</view>

				<!-- 功能选项网格 -->
				<view class="action-grid">
					<view v-for="item in actions" :key="item.type" :class="['action-item', item.styleClass]"
						:style="item.styleObject" @click="handleActionClick(item.type)">
						<view class="item-main-content">
							<view class="item-title">
								<view class="">
									{{ item.title }}
								</view>
								<u-icon name="arrow-right" color="#000" size="16" bold class="arrow-u-icon"></u-icon>
							</view>
							<view class="item-subtitle">{{ item.subtitle }}</view>
							<image class="item-sbd" src="@/static/release/publish-sbd.png"></image>
						</view>


						<!-- “晒本地”专属的“去认证”标签 -->
						<view v-if="item.type === 'local'" class="certification-tag"
							@click.stop="handleToAuthentication">
							{{commonStatus == 1 ? '去修改' :'去认证'}}
						</view>
					</view>
				</view>
			</view>

			<!-- 关闭按钮，固定在页面底部中央 -->
			<view class="close-button-wrapper" @click="closePage">
				<u-icon name="close" color="#000" bold size="18"></u-icon>
			</view>
			<u-popup :show="showCertification" mode="center" @close="close" @open="open" :round="15">
				<view class="CertificationStyle">
					<view class="title">
						您还未认证
					</view>
					<view class="content">
						需要认证成为本地人后才可以发布“晒本地”哦！
					</view>
					<view class="button-wrapper">
						<view class="button" @click="handleToAuthenticationBottomBtn()">
							去认证
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</transition>
</template>

<script>
	import {
		getPersonByUserId,
	} from '@/request/api.js';
	export default {
		name: "PublishOverlay",
		props: {
			show: {
				type: Boolean,
				default: false,
			},
		},
		data() {
			return {
				showCertification: false,
				actions: [{
						type: 'local',
						title: '晒本地',
						subtitle: '我是本地人，我来晒家乡',
						styleClass: 'bg-image-local',
						styleObject: {
							'background-image': `url(${require('@/static/release/publish-sbd.png')})`
						}
					},
					// {
					// 	type: 'pitfall',
					// 	title: '聊避坑',
					// 	subtitle: '踩过的坑，说道说道',
					// 	styleClass: 'gradient-blue',
					// 	styleObject: {}
					// },
					{
						type: 'travelogue',
						title: '发游记',
						subtitle: '记录旅途中的美好瞬间',
						styleClass: 'gradient-green',
						styleObject: {}
					},
					{
						type: 'live',
						title: '直播',
						subtitle: '走哪播哪，一起“云旅行”',
						styleClass: 'gradient-yellow',
						styleObject: {}
					},
				],
				commonStatus: 0, //认证状态  0未提交，1已通过，2已驳回。3已提交待审核
				isCurrentClinetPost: 0
			};
		},
		watch: {
			show: {
				handler(newVal) {
					if (newVal) {
						// 弹框打开时调用
						this.getPersonStatus();
					}
				},
				immediate: true // 如果需要组件初始化时也调用
			}
		},
		methods: {
			open() {
				// console.log('open');
			},
			close() {
				this.showCertification = false
				// console.log('close');
			},
			closePage() {
				this.close()
				this.$emit('close');
			},
			handleActionClick(type) {
				if (type == 'live') {
					uni.showToast({
						title: '功能暂未开发',
						icon: 'none'
					});
					return
				}
				// 如果个人信息认证未完成，去跳转到判断是否打开弹框，如果0打开弹框，否则直接放行
				if (type == 'local' && (this.commonStatus == 0 || this.commonStatus == 3)) {
					this.handleToAuthentication()
					return
				}
				// 如果跳转的是晒本地并且已经发布过晒本地，则放行，否则到认证界面
				if (type == 'local' && this.isCurrentClinetPost != 1) {
					uni.navigateTo({
						url: '/pages_sub/authentication/Personal/entrance'
					})
					return
				}
				// this.closePage();
				const url = `/pages_sub/release/release/release?from=${type}`;

				uni.navigateTo({
					url: url,
					success: (res) => {
						this.closePage();
					},
					fail: (err) => {
						// 如果跳转失败，弹窗不会关闭，并给出提示
						uni.showToast({
							title: '页面跳转失败',
							icon: 'none'
						});
						console.error('跳转到发布页失败:', err);
					}
				});
			},
			handleToAuthentication() {
				if (this.commonStatus == 0) {
					this.showCertification = true
					return
				}
				this.showCertification = false
				uni.navigateTo({
					url: '/pages_sub/authentication/Personal/entrance'
				})
			},
			handleToAuthenticationBottomBtn() {
				this.showCertification = false
				uni.navigateTo({
					url: '/pages_sub/authentication/Personal/entrance'
				})
			},
			handleToTaskCenter(){
				uni.navigateTo({
					url:'/pages_sub/index/checkin/checkin'
				})
			},
			// 获取身份认证状态
			getPersonStatus() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				getPersonByUserId(params).then(res => {
					// 只要返回500就打开弹框
					switch (res.data.code) {
						case 200:
							// 本地人身份认证状态
							if (res.data.ClientUserPerson && res.data.ClientUserPerson.starts == 1) {
								this.commonStatus = 1
							} else if (res.data.ClientUserPerson && (res.data.ClientUserPerson == null || res.data
									.ClientUserPerson.starts == 0)) {
								this.commonStatus = 0
							} else if (res.data.ClientUserPerson && (res.data.ClientUserPerson.starts == 2 || res
									.data.ClientUserPerson.starts == 3)) {
								this.commonStatus = 3
							}
							// 是否已经发过本地帖子
							if (res.data.clientPostList.length > 0) {
								this.isCurrentClinetPost = true
							}
							break;
						default:
							// 其他情况默认为未认证
							// this.handleToAuthentication()
							this.commonStatus = 0
							break;
					}
				})
			}
		},
	};
</script>

<style lang="scss" scoped>
	/* 整个覆盖层页面 */
	.publish-overlay {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 10075;
		display: flex;
		flex-direction: column;
		background: linear-gradient(180deg, #FFD9AD 0%, #E7F6F8 100%);
		padding-top: var(--status-bar-height);
		box-sizing: border-box;
	}

	/* 内容容器 */
	.publish-content-wrapper {
		flex: 1;
		display: flex;
		flex-direction: column;
		padding: 0 40rpx;
	}

	/* 顶部提示信息 */
	.top-info-bar {
		display: flex;
		align-items: center;
		background-color: rgba(255, 232, 224, 0.9);
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin: 20rpx 0;
		align-self: flex-end;

		.info-icon {
			font-size: 32rpx;
			color: #FFAE1A;
		}

		.info-text {
			font-size: 24rpx;
			color: #666;
			margin: 0 16rpx;
		}

		.info-circle-icon {
			font-size: 40rpx;
			color: #333;
		}
	}

	/* 顶部文字区域 */
	.header-text {
		padding-top: 60rpx;
		margin-bottom: 80rpx;

		.title {
			display: block;
			font-size: 54rpx;
			font-weight: 500;
			line-height: 1.4;
		}

		.subtitle-wrapper {
			position: relative;
			display: inline-block;
		}

		.subtitle {
			display: block;
			font-size: 52rpx;
			font-weight: 500;
			margin-top: 10rpx;
			line-height: 1.5;
			position: relative;
			z-index: 2;
		}

		.subtitle-background-icon {
			position: absolute;
			bottom: -8rpx;
			left: 90rpx;
			right: 0;
			font-size: 44rpx;
			color: #FFD60A;
			z-index: 1;
			transform: scaleX(1.1);
		}
	}

	/* 选项网格 */
	.action-grid {
		width: calc(100% - 80rpx);
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 30rpx;
		align-items: end;
		position: fixed;
		bottom: 300rpx;
	}

	/* 列表项 */
	.action-item {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 35rpx 0rpx 40rpx 35rpx;
		border-radius: 20rpx;
		/* 【已修改】加深阴影 */
		box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0.15);
		color: #303133;
		box-sizing: border-box;
		background-size: cover;
		background-position: center;
		/* 【已修改】增加白色边框 */
		border: 2rpx solid #ffffff;

		.item-main-content {
			.item-title {
				display: flex;
				font-size: 34rpx;
				font-weight: 700;
				margin-right: 50rpx;
			}

			.item-subtitle {
				display: block;
				font-size: 24rpx;
				color: #666;
				margin-top: 10rpx;
			}

			.item-sbd {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				z-index: -1;
			}
		}

		.arrow-u-icon {
			position: absolute;
			top: 44rpx;
			right: 120rpx;
			margin-left: 50rpx;
		}

		&.bg-image-local {
			border-top: none !important;
			border-left: none !important;
			border-right: none !important;
			border-bottom: none !important;
			background-size: 100% 100%;
			box-shadow: 0 8rpx 25rpx rgba(0, 0, 0, 0);
			padding-top: 50rpx;
			border-radius: 0;
		}

		/* 背景样式 */
		&.gradient-green {
			background: linear-gradient(135deg, #9EFFA6, #D3FFD7);
		}

		&.gradient-blue {
			background: linear-gradient(135deg, #5CF4FF, #D6FCFF);
		}

		&.gradient-yellow {
			background: linear-gradient(135deg, #FFE750, #FFF4AE);
		}
	}

	/* “晒本地”专属的“去认证”标签 */
	.certification-tag {
		position: absolute;
		top: 5rpx;
		right: 15rpx;
		color: #8C5400;
		font-size: 24rpx;
		font-weight: 500;
		padding: 8rpx 16rpx;
		border-radius: 20rpx 20rpx 20rpx 4rpx;
	}

	/* 关闭按钮 */
	.close-button-wrapper {
		// margin-top: auto;
		// margin-bottom: 60rpx;
		// margin-bottom: calc(60rpx + constant(safe-area-inset-bottom));
		// margin-bottom: calc(60rpx + env(safe-area-inset-bottom));
		// align-self: center;
		// display: flex;
		// justify-content: center;
		// align-items: center;
		// width: 70rpx;
		// height: 70rpx;
		// background-color: #F1EFEF;
		// border-radius: 50%;
		// box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
		position: fixed;
		/* 改为固定定位 */
		bottom: 60rpx;
		/* 距离底部的距离 */
		left: 50%;
		/* 水平居中 */
		transform: translateX(-50%);
		/* 精确居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		width: 70rpx;
		height: 70rpx;
		background-color: #F1EFEF;
		border-radius: 50%;
		box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.2);
		z-index: 10076;
		/* 确保在遮罩层之上 */

		/* 安全区域适配 */
		margin-bottom: constant(safe-area-inset-bottom);
		margin-bottom: env(safe-area-inset-bottom);
	}

	/* Vue transition 动画样式: 淡入淡出 */
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s ease;
	}

	.fade-enter,
	.fade-leave-to {
		opacity: 0;
	}

	// 去认证弹框
	.CertificationStyle {
		width: calc(100vw - 160rpx);
		padding: 40rpx 0;
		text-align: center;

		.title {
			font-size: 40rpx;
			line-height: 40rpx;
			font-weight: bold;
			text-align: center;
			margin-bottom: 36rpx;
		}

		.content {
			font-weight: 500;
			font-size: 30rpx;
			line-height: 1.5;
			padding: 0 110rpx 36rpx;
			text-align: left;
			text-indent: 1em;
		}

		.button-wrapper {
			display: flex;
			justify-content: center;
			padding: 0 40rpx 40rpx;

			.button {
				width: 180rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: rgba(255, 179, 39, 1);
				border-radius: 30rpx;
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}
</style>